<template>
    <div class="broken" ref="broken">

    </div>
</template>

<script>
    import bus from "@/bus/bus";
    import * as echarts from 'echarts'
    export default {
        name: "broken",
        data(){
            return{
                Arrs:['10.1', '10.5', '10.10', '10.15', '10.20', '10.25', '10.30'],
                sArrs:[120, 132, 101, 134, 90, 230, 210],
                sArrs1:[220, 182, 191, 234, 290, 330, 311]
            }
        },
        mounted() {
            //接收传参
            bus.$on('shareUserInput',(data)=>{
                let nameBroken=data.userInput
                console.log('broken收到的参',nameBroken)
            })


            let broken=echarts.init(this.$refs.broken)
            let Data=this.Arrs
            let sData1=this.sArrs
            let sData2=this.sArrs1
            let option={
                title:{
                    text:'增长趋势',
                    textStyle:{
                        color:'#FFFFFF',
                        opacity:0.8
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新增本土', '新增无症状'],
                    width:'1px',
                    textStyle: {
                        color:'#FFFFFF',
                        opacity: 0.8
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Data,
                    axisLine:{
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine:{
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [
                    {
                        name: '新增本土',
                        type: 'line',
                        stack: 'Total',
                        itemStyle: {
                            normal: {
                                color: "#F29C1B",
                                lineStyle: {
                                    color: "#F29C1B"
                                }
                            }
                        },
                        data: sData1
                    },
                    {
                        name: '新增无症状',
                        type: 'line',
                        stack: 'Total',
                        itemStyle: {
                            normal: {
                                color: "#FF5252",
                                lineStyle: {
                                    color: "#FF5252"
                                }
                            }
                        },
                        data: sData2
                    }
                ]
            }
            broken.setOption(option)
        }
    }
</script>

<style scoped>
    .broken{
        height: 50%;
    }

</style>